/**
 * 考试信息菜单
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/manageClass/allRoomsInfo' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>考试信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.sSubject" placeholder="请输入考试名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
       <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加考试</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
   <el-table :data="listData" border :row-key="getRowKeys" @expand-change="expandChange" :expand-row-keys="expands" style="width: 100%; margin-top: 20px" v-loading= "loading" >
    <el-table-column type="expand">
      <template slot-scope="props">
       <el-table size="small" :data="props.row.subjectList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
         <el-table-column
          prop="subId"
          label="考试Id"
          sortable
          >
        </el-table-column>
        <el-table-column
          prop="eno"
          label="考试编号"
          sortable
          >
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="考试科目"
          >
        </el-table-column>
        <el-table-column
          prop="sDate"
          label="考试日期"
         >
        </el-table-column>
        <el-table-column
          label="考试开始结束时间"
        >
           <template slot-scope="scope">
          {{scope.row.sStartTime + ' ~ ' + scope.row.sEndTime}}
        </template>
      </el-table-column>
      </el-table>
      </template>
    </el-table-column>
     <el-table-column
      label="专业编号"
      prop="eno"
      align="center"
      width="100">
     </el-table-column>
     <el-table-column
       label="考试名称"
       prop="eName"
       align="center">
     </el-table-column>
     <el-table-column
       label="场次"
       prop="eSessions"
       align="center">
     </el-table-column>
      <el-table-column align="center" label="考试状态" width="100">
       <template slot-scope="scope">
          <el-switch v-model = "scope.row.eStatus" active-color="#13ce66" inactive-color="#909399" @change="editType(scope.$index, scope.row)">
          </el-switch>
        </template>
      </el-table-column>
     <el-table-column
       label="考试日期"
       prop="eDate"
       align="center">
     </el-table-column>
     <el-table-column
       label="考试报名开始结束时间"
       align="center" width="350%">
        <template slot-scope="scope">
          {{scope.row.eSignStartTime + ' ~ ' + scope.row.eSignEndTime}}
        </template>
     </el-table-column>
     <el-table-column align="center"  prop="eLocName" label="教室地点" width="200">
     </el-table-column>
     <el-table-column align="center" label="操作" width="400">
        <template slot-scope="scope">
         <el-button-group>
          <el-button size="mini" icon="el-icon-edit" type="primary" @click="handleExamEdit(scope.$index, scope.row)">编辑考试</el-button>
          <el-button size="mini" icon="el-icon-circle-close" type="danger" @click="deleteExam(scope.$index, scope.row)">删除考试</el-button>
          <el-button size="mini" icon="el-icon-s-promotion" type="success" @click="generateExam(scope.$index, scope.row)">生成准考证</el-button>
          </el-button-group>
        </template>
      </el-table-column>
  </el-table>
    <!-- 分页组件 -->
    <Pagination :child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 考试 编辑界面 -->
     <el-dialog :title="title" :visible.sync="courseExamVisible" width="35%" @click="closeDialog">
      <el-form label-width="125px" :model="ExamForm">
       <el-form-item label="考试编号" prop="eno">
          <el-input size="small" v-model="ExamForm.eno" auto-complete="off" placeholder="请输入考试编号"></el-input>
        </el-form-item>
         <el-form-item label="考试名称" prop="eName">
          <el-input size="small" v-model="ExamForm.eName" auto-complete="off" placeholder="请输入考试名称"></el-input>
        </el-form-item>
        <el-form-item label="场次" prop="eSessions">
          <el-input size="small" v-model="ExamForm.eSessions" auto-complete="off" placeholder="请输入考试场次"></el-input>
        </el-form-item>
        <el-form-item label="教室状态" prop="eStatus">
          <el-select v-model="ExamForm.eStatus" placeholder="请选择教室状态">
           <el-option
             v-for="item in options"
             :key="item.value"
             :label="item.label"
             :value="item.value">
           </el-option>
           </el-select>
        </el-form-item>
         <el-form-item label="考试日期">
          <div class="block">
             <el-date-picker
               v-model="date"
               type="date"
               value-format="yyyy-MM-dd"
               placeholder="选择日期">
             </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="报名开始结束时间">
          <el-date-picker
             v-model="dateTime"
             type="datetimerange"
             value-format="yyyy-MM-dd hh:mm:ss"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
         <el-form-item label="考试地点" prop="eLocName">
          <el-input size="small" v-model="ExamForm.eLocName" auto-complete="off" placeholder="请输入考试地点"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" @click="submitForm(title)">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getExamInfoAndCourse, addExamInfo, deleteExamInfo, updateExamInfo, generateCard } from '../../../api/userOpe'
import Pagination from '../../../components/Pagination'

export default {
  data () {
    return {
      loading: true, // 是显示加载
      subjectFormVisible: false, // 添加考试界面
      courseExamVisible: false, // 编辑专业界面
      title: '添加考试',
      // 列表展开参数
      expands: [],

      // 日历选择器
      date: '',
      // 日期时间选择器
      dateTime: ['', ''],
      // 时间选择器
      time: ['', ''],
      // 添加考试信息表单数据
      ExamForm: {
        eid: '',
        eno: '',
        eDate: '',
        eLocName: '',
        eName: '',
        eSessions: '',
        eSignEndTime: '',
        eSignStartTime: '',
        eStatus: ''
      },
      // 编辑功能 表单
      editForm: {
        subId: '',
        sDate: '',
        subjectName: '',
        sStartTime: '',
        sEndTime: ''
      },

      // 考试状态选择器数据
      options: [{
        value: '1',
        label: '进行中'
      }, {
        value: '0',
        label: '已结束'
      }],
      // 表单动态数据存储
      formInline: {
        page: 1,
        limit: 15,
        sSubject: ''
      },
      rightData: [], // 教室所有数据
      listData: [], // 当前显示的数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 15,
        total: 0
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created () {
    this.dateFormat()
    this.getData()
  },

  methods: {
    // 人性化处理 table 展开行默认展开行
    getRowKeys (row) {
      return row.eid
    },
    expandChange (row) {
      // console.log(row.cid, this.expands[0])
      if (row.eid === this.expands[0]) { // 判断是不是本身，如果点击的还是本身，则关闭，人性化
        this.expands = []
      } else {
        if (row.subjectList) {
          this.expands = [] // 每次点击一个框，出自己以外其他的都不展示， 如果需要方便两个专业考试的对比那就删除本行
          if (row) {
            this.expands.push(row.eid)// 每次push进去的是每行的ID
          }
        } else {
          this.expands = []// 默认不展开
        }
      }
    },
    // 初次时间格式化
    dateFormat () {
      const date = new Date()
      const y = date.getFullYear() + '-'
      const m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const h = (date.getHours() < 10 ? ' 0' + date.getHours() : ' ' + date.getHours()) + ':'
      const min = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      const sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      this.date = y + m + d
      this.dateTime[0] = y + m + d + h + min + sec
      this.dateTime[1] = y + m + d + h + min + sec
      this.time[0] = h + min + sec
      this.time[1] = h + min + sec
    },
    // 获取专业考试信息
    getData () {
      getExamInfoAndCourse().then(res => {
        // console.log(res)
        if (res.code === 20000) {
          this.loading = false
          this.$message.success('考试信息获取成功')
          console.log(res.data.examInfoList)
          this.rightData = res.data.examInfoList

          this.rightData.forEach(item => {
            item.eStatus === 1 ? item.eStatus = true : item.eStatus = false
          })
          // 分页数据切割
          this.cutData()
          this.pageparm.total = this.rightData.length
        }
      }).catch((e) => {
        this.loading = false
      })
    },
    // 数据切割 分页
    cutData () {
      this.listData = this.rightData.slice((this.formInline.page - 1) * this.formInline.limit, (this.formInline.page * this.formInline.limit))
    },
    // 分页插件事件
    callFather (parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.cutData()
    },
    // 搜索事件 巧妙使用过滤器 filter
    search () {
      if (this.formInline.sSubject.trim() !== '') {
        this.listData = this.rightData.filter((item) => {
          return this.formInline.sSubject.trim() === item.course
        })
      } else {
        this.getData()
      }
    },

    // switch 按钮切换触发事件
    editType (index, row) {
      this.ExamForm.eid = row.eid
      this.ExamForm.eDate = row.eDate
      this.ExamForm.eLocName = row.eLocName
      this.ExamForm.eName = row.eName
      this.ExamForm.eSessions = row.eSessions
      this.ExamForm.eSignEndTime = row.eSignEndTime
      this.ExamForm.eSignStartTime = row.eSignStartTime
      this.ExamForm.eno = row.eno
      this.ExamForm.eStatus = row.eStatus === true ? 1 : 0 // 转换
      updateExamInfo(this.ExamForm).then(res => {
        if (res.message === 'OK') this.$message.success('考试状态更新成功')
        else {
          this.$message.error('考试状态更新失败')
          row.rStatus = !row.rStatus
        }
        this.getData()
      }).catch((e) => {
        this.$alert('考试状态更新失败', '提示', {
          confirmButtonText: '确定'
        })
        row.rStatus = !row.rStatus
      })
    },
    // 添加考试预处理
    handleEdit () {
      this.title = '添加考试'
      this.courseExamVisible = true
      this.ExamForm.eDate = ''
      this.ExamForm.eLocName = ''
      this.ExamForm.eName = ''
      this.ExamForm.eSessions = ''
      this.ExamForm.eStatus = ''
      this.ExamForm.eno = ''
    },
    // 修改考试信息编辑框预处理
    handleExamEdit (index, row) {
      console.log(row)
      this.title = '编辑考试'
      this.courseExamVisible = true
      this.ExamForm.eid = row.eid
      this.ExamForm.eDate = row.eDate
      this.ExamForm.eLocName = row.eLocName
      this.ExamForm.eName = row.eName
      this.ExamForm.eSessions = row.eSessions
      this.ExamForm.eStatus = row.eStatus === true ? '1' : '0'
      this.ExamForm.eno = row.eno
    },
    // 保存考试信息，并刷新获取数据
    submitForm (val) {
      if (val === '添加考试') {
        this.ExamForm.eDate = this.date
        this.ExamForm.eSignStartTime = this.dateTime[0]
        this.ExamForm.eSignEndTime = this.dateTime[1]
        // console.log(this.ExamForm)
        addExamInfo(this.ExamForm).then(res => {
          this.loading = true
          if (res.message === 'OK') {
            this.courseExamVisible = false
            this.loading = false
            this.$message.success('添加考试成功！')
            this.getData()
          } else {
            this.loading = false
            this.$message.error('添加失败，请重试！')
          }
        }).catch((e) => {
          this.loading = false
          this.$message.error('请求异常，请重试！')
        })
      } else {
        this.ExamForm.eDate = this.date
        this.ExamForm.eSignStartTime = this.dateTime[0]
        this.ExamForm.eSignEndTime = this.dateTime[1]
        updateExamInfo(this.ExamForm).then(res => {
          if (res.message === 'OK') {
            this.courseExamVisible = false
            this.loading = false
            this.$message.success('编辑考试成功！')
            this.getData()
          } else {
            this.loading = false
            this.$message.error('编辑失败，请重试！')
          }
        }).catch((e) => {
          this.loading = false
          this.$message.error('请求异常，请重试！')
        })
      }
    },
    // 删除考试 考试下的考试科目也会被一并删除
    deleteExam (index, row) {
      console.log(row.eid)
      this.$confirm('此操作将永久删除该考试以及其下考试科目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteExamInfo({ eid: row.eid }).then(res => {
          console.log(res)
          if (res.message === 'OK') {
            this.$message.success('删除考试成功！')
            this.getData()
          } else {
            this.$message.error('删除考试失败！')
          }
        }).catch((e) => {
          this.$message.warning('请求数据异常，请刷新页面重试！')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    generateExam (index, row) {
      generateCard({ eno: row.eno }).then(res => {
        if (res.message === 'OK') {
          this.$message.success('生成准考证成功!')
        } else {
          this.$message.error('生成准考证失败!')
        }
      }).catch(() => {
        this.$message.warning('请求异常，请重试!')
      })
    },
    // 关闭编辑、添加弹出框
    closeDialog () {
      this.subjectFormVisible = false
      this.courseExamVisible = false
    }
  }
}

</script>

<style lang="stylus" scoped>
.user-search
  margin-top: 20px
.userRole
  width: 100%
.el-input
  width: 100%
.el-table, .el-table__expanded-cell
  opacity : 0.8
.el-button
   height : 33px !important
   margin-left : 10px
.upload-demo
  display: inline-block
  margin-left : 10px
.form_div
  border : 1px solid  #000000
  margin: -1px auto auto auto
  .el_methods
   width : 50%
   position: static
   transform : translate(0,-370%)
   margin-left  : 72%
  .exam
   padding-top : 9px
.el-form-item
 padding: 20px 0px 0px 0px
 margin : 0px
</style>
